<template>
  <view class="wntj_item_box">
    <view class="word_box">
      <view class="title ellipsis">
        {{ item.name }}
      </view>
      <view class="desc ellipsis" v-if="hoverIndex === index">
        {{ item.content }}
      </view>
    </view>
    <image :src="item.pic" mode="scaleToFill"></image>
  </view>
</template>

<script>
export default {
  name: "wntj_item",
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
      default: 0,
    },
    hoverIndex: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss">
.wntj_item_box {
  width: 120rpx;
  height: 160rpx;
  color: #fff;
  overflow: hidden;
  border-radius: 8rpx;
  position: relative;
  margin: 10rpx;

  image {
    width: 100%;
    height: 100%;
    background-image: url("../../static/loading500.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .title {
    font-size: 14rpx;
    font-weight: bold;
    margin: 10px 5rpx 0rpx;
    width: 110rpx;
  }

  .desc {
    font-size: 12rpx;
    margin-top: 6rpx;
    margin: 4px 5rpx;
    width: 110rpx;
  }

  .word_box {
    // position: absolute;
    // top: 100rpx;
    // left: 0rpx;
    // width: 160rpx;
    // height: 100rpx;
    // background-color: $uni-color-theme;
    // z-index: 10;
    // TODO 修改样式
    position: absolute;
    top: 136rpx;
    left: 0rpx;
    width: 160rpx;
    background-color: #080a21;
    z-index: 10;
  }
}
</style>
